<template>
    <div class="vpubsub">
        <h2>消息订阅与发布</h2>
        <div class="hr"></div>
        <el-tag effect="dark">作用</el-tag>
        <p class="decr">
            实现组件间通信
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">说明</el-tag>
        <p class="decr">
            pubsub是第三方插件，<br>
            用于实现任意组件间的通信。使用前，需要先安装。npm i pubsub-js or: yarn add pubsub-js<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">使用步骤</el-tag>
        <p class="decr">
            1. 哪个组件要使用消息的订阅与发布，就在该组件中引入pubsub。<br>
            2. 在订阅消息时，起一个消息名（相当于自定义事件名），发布和订阅都用该消息名。<br>
            3. 发送数据的组件发布消息，接收数据的组件订阅该消息。<br>
            4. 不需要接收数据时，可以取消订阅。<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">Demo</el-tag>
        <p class="decr">
            本案例仍以兄弟组件为例。<br>
            VpubsubSon1组件用来接收数据，即订阅。<br>
            VpubsubSon2组件用来发送数据，即发布。<br>
            VpubsubSon1组件在订阅后，设置取消订阅。<br>
        </p>
        <p class="decr">
            <VpubsubSon2></VpubsubSon2>
        </p>
        <p class="decr">
            <VpubsubSon1></VpubsubSon1>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';
import VpubsubSon1 from './VpubsubSon1';
import VpubsubSon2 from './VpubsubSon2';

export default {
    name: 'Vpubsub',
    mixins: [mixinPage],
    components: {VpubsubSon1, VpubsubSon2}
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>